<!DOCTYPE html>
<html>

<head>
    <title>游记列表</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <!--jsRender-->
    <script src="/js/plugins/jsRender/jsrender.min.js"></script>


</head>
<script>
    // 解决上一页数据丢失问题
    var dataList = [];
    //分页数据
    var currentPage = 1;
    // 是否有下一页
    var travelsHasNextPage = true;
    var picturesHasNextPage = true;

    /**
     *更新分页参数
     */
    function updatePaginationParams(currentPageParam, travelsHasNextPageParam, picturesHasNextPageParam) {
        currentPage = currentPageParam;
        travelsHasNextPage = travelsHasNextPageParam;
        picturesHasNextPage = picturesHasNextPageParam;
    }

    /*一\页面list,分页*/
    $(function () {
        /**
         * 查询写一页数据
         */
        function query() {
            $.get("/friendsTravelShares",
                {
                    currentPage: currentPage, travelsHasNextPage: travelsHasNextPage
                    , picturesHasNextPage: picturesHasNextPage
                },
                function (result) {
                    if (!result.list) return;

                    updatePaginationParams(currentPage + 1, result.travelsHasNextPage, result.picturesHasNextPage);
                    //页面数据添加
                    var data = result.list;
                    dataList = $.merge(dataList, data);
                    //渲染页面
                    var html2 = $("#showBeanTmpl2").render(result);
                    $("#allTravelShares").append(html2);
                    console.log(dataList);
                }
            );
        }

        query();
        //屏幕滚动事件
        $(window).scroll(function () {
            if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                // 解决底部翻页问题
                if (travelsHasNextPage || picturesHasNextPage) {
                    query();
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '深不见底还是到底啦~',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        });
    });
    /*渲染函数*/
    $.views.converters("location", function (val) {
        return Math.round(val * 100) / 100;
    });
    /*二\图片分享按钮点击事件*/
    $(function () {
        $(".pic-share").click(function () {
            window.location.href = "/mine/pictureSharePage.html";
        });
    });
</script>
<script type="text/x-jsrender" id="showBeanTmpl2">
    {{for list}}
    <div class="row detail">
        {{if type==1}}
        <!--游记分享-->
            <div class="col bigimg">
                {{if type==1}}
                    <a href="/travelContent.html?id={{:showDetail.id}}">
                        <img src="{{:showDetail.coverUrl}}">
                    </a>
                {{else}}
                    <img src="{{:showDetail.coverUrl}}">
                {{/if}}
            </div>
             <div class="col">
                <!--title-->
                <a class="titleBtn" {{if type==1}} href="/travelContent.html?id={{:showDetail.id}}" {{else}} href="javaScript:;"{{/if}}>
                    <h4>{{:showDetail.title}}</h4>
                </a>
                <p>
                    <!--用户-->
                    <a href="/userProfiles.html?userId={{:author.id}}">
                        <img class="rounded-circle head-img" src="{{:author.headImgUrl}}">
                        <span>{{:author.nickName}}</span>
                    </a>
                    {{if type==1}}
                        <!--<span>[游记分享]</span>-->
                    {{else}}
                        <span>[照片分享]</span>
                    {{/if}}
                </p>
                 <p>
                    <!--地点-->
                    {{if type==1}}
                        <span class="addr">{{:showDetail.place.name}}</span>
                    {{else}}
                        <span class="addr">{{:showDetail.cityName}}@({{location:showDetail.locationL}},{{location:showDetail.locationD}})</span>
                    {{/if}}
                 </p>
             </div>
        {{else}}
        <!--照片分享-->
            <!--1:照片-->
            <div class="bigimg">
                {{if type==1}}
                    <a href="/travelContent.html?id={{:showDetail.id}}">
                        <img src="{{:showDetail.coverUrl}}" >
                    </a>
                {{else}}
                    <img src="{{:showDetail.coverUrl}}" style="width: 1000px;">
                {{/if}}
            </div>
            <!--2:用户信息-->
            <div class="col">
                <!--title-->
                <a class="titleBtn " {{if type==1}} href="/travelContent.html?id={{:showDetail.id}}" {{else}} href="javaScript:;"{{/if}}>
                    <h4>{{:showDetail.title}}</h4>
                </a>

                 <p>
                    <!--用户-->
                    <a href="/userProfiles.html?userId={{:author.id}}">
                        <img class="rounded-circle head-img" src="{{:author.headImgUrl}}">
                        <span>{{:author.nickName}}</span>
                    </a>
                    <span>[照片分享]</span>
                    <!--地点-->
                    <span class="addr" style="float: right">
                        {{:showDetail.cityName}}@({{location:showDetail.locationL}},{{location:showDetail.locationD}})
                        <br>附近的图片分享
                    </span>
                 </p>
             </div>
        {{/if}}
    </div>
    <br><br>
    {{/for}}

</script>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="/mine/profiles.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-5"></div>
        <div class="col pic-share" style="text-align: right;">
            <span><i class="fa fa-send-o fa-2x" id="release" style="color: white;"></i></span>
        </div>
    </div>
</div>

<div class="container">
    <h6>好友动态</h6>
    <div class="travelshares">
        <div id="allTravelShares">
        </div>
    </div>
</div>


</body>

</html>